import './statistic.less'
import {Button, Col, DatePicker, Form, Input, Row, Select} from "antd";
import * as echarts from 'echarts';
import {useEffect, useRef, useState} from "react";
import {getMeetingCount, getUserCount} from '../../../api/admin/statistic.js'

const formItemLayout = {
    labelCol: {
        sm: {span: 6},
    }, wrapperCol: {
        sm: {span: 18},
    },
}

const Statistic = () => {
    const {RangePicker} = DatePicker;
    const containerRef = useRef(null);
    const containerRef2 = useRef(null);
    const [form] = Form.useForm();
    const [userCountData, setUserCountData] = useState([])
    const [meetingCountData, setMeetingCountData] = useState([])
    useEffect(() => {
        getUserCountList()
        getMeetingCountList()
    }, [])

    useEffect(() => {
        const myChart = echarts.init(containerRef.current);

        if (!meetingCountData) {
            return;
        }

        myChart.setOption({
            title: {
                text: '用户预定情况'
            },
            tooltip: {},
            xAxis: {
                data: meetingCountData.map(item => item.username)
            },
            yAxis: {},
            series: [
                {
                    name: '预定次数',
                    type: 'bar',
                    data: meetingCountData.map(item => {
                        return {
                            name: item.username,
                            value: item.bookingCount
                        }
                    })
                }
            ]
        });
    }, [meetingCountData]);

    useEffect(() => {
        const myChart = echarts.init(containerRef2.current);

        if (!userCountData) {
            return;
        }

        myChart.setOption({
            title: {
                text: '会议室使用情况'
            },
            tooltip: {},
            series: [
                {
                    name: '使用次数',
                    type: 'pie',
                    data: userCountData?.map(item => {
                        return {
                            name: item.meetingRoomName,
                            value: item.usedCount
                        }
                    })
                }
            ]
        });
    }, [meetingCountData]);

    const inquire = () => {
        getUserCountList()
        getMeetingCountList()
    }

    const reset = () => {
        form.resetFields();
        setCreatedStartTime('')
        setCreatedEndTime('')
        setUserCountData([])
        setMeetingCountData([])
        getUserCountList()
        getMeetingCountList()
    }

    let [createdStartTime, setCreatedStartTime] = useState('')
    let [createdEndTime, setCreatedEndTime] = useState('')

    const onTimeChange = (date, dateString) => {
        setCreatedStartTime(dateString[0])
        setCreatedEndTime(dateString[1])
    }

    const getMeetingCountList = () => {
        const list = {
            startTime: createdStartTime ? createdStartTime : '2024-7-9',
            endTime: createdEndTime ? createdEndTime : '2024-8-9'
        }
        getMeetingCount(list)
            .then(res => {
                console.log(res)
                setMeetingCountData(res.data)
            })
    }

    const getUserCountList = () => {
        const list = {
            startTime: createdStartTime ? createdStartTime : '2024-7-9',
            endTime: createdEndTime ? createdEndTime : '2024-8-9'
        }
        getUserCount(list)
            .then(res => {
                console.log(res)
                setUserCountData(res.data)
            })
    }

    return (
        <>
            <div id="statistics-container">
                <div className="statistics-form">
                    <Form {...formItemLayout} form={form}>
                        <Row gutter={36}>
                            <Col span={8}>
                                <Form.Item
                                    name="createdTime"
                                    label="时间"
                                >
                                    <RangePicker onChange={onTimeChange} style={{width: '100%'}} format='YYYY-MM-DD'
                                                 placeholder="日期"/>
                                </Form.Item>
                            </Col>

                            {/*<Col span={8}>*/}
                            {/*    <Form.Item label="图表类型" name="chartType" initialValue={"bar"}>*/}
                            {/*        <Select>*/}
                            {/*            <Select.Option value="pie">饼图</Select.Option>*/}
                            {/*            <Select.Option value="bar">柱形图</Select.Option>*/}
                            {/*        </Select>*/}
                            {/*    </Form.Item>*/}
                            {/*</Col>*/}

                            <Col span={16}>
                                <div className='operation'>
                                    <Button style={{marginRight: '10px'}} onClick={reset}>重置</Button>
                                    <Button type="primary" onClick={inquire}>查询</Button>
                                </div>
                            </Col>
                        </Row>
                    </Form>
                </div>
                <div className="statistics-chart" ref={containerRef}>
                </div>
                <div className="statistics-chart" ref={containerRef2}></div>
            </div>
        </>
    )
}

export default Statistic